<template>
    <div>
       姓名:<input type="text" v-model="person.name"><br>
       年龄: <input type="text" v-model="person.age"><br>
       性别: <input type="radio" name="sex" v-model="person.gender" value="1">男 
             <input type="radio" name="sex" v-model="person.gender" value="0">女
             <br>
       兴趣: <input type="checkbox" v-model="person.hobby" value="readBook">读书
            <input type="checkbox" v-model="person.hobby" value="playgames">玩游戏
            <input type="checkbox" v-model="person.hobby" value="playbasketball">打篮球
            <input type="checkbox" v-model="person.hobby" value="playfootball">踢足球
            <br>
            <button @click="register">注册</button>
        <hr>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>兴趣</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in personList" :key="item.name">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender==1?"男":"女"}}</td>
                    <td>{{item.hobby.join("、")}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data(){
        return{
          person:{
            name:'',
            age:'',
            gender:1,
            hobby:[]
          },
          personList:[]
        }
    },
    methods:{
        register(){
            console.log(this.person);
            //利用深拷贝实现重新赋值给一个新对象
            let s=JSON.parse(JSON.stringify(this.person));
            //let s=this.person
            //目前没有编写后端程序，所以将对象装在数组中完成
            this.personList.push(s)
        }
    }
}
</script>

<style>
    table{
        border-collapse: collapse;
        width: 600px;
    }
    td{
        text-align: center;
        padding: 10px;
        border: 1px solid #ccc;
    }
</style>